<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小图标</title>
    <link rel="stylesheet" href="icon.css">
    <script type="text/javascript" src="icon.js"></script>
    <script type="text/javascript" src="../common/js/jquery/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="container">
        <!--箭头图标-->
        <div class="one-icon-container" onclick="arrowToggle($(this).children('div')[0], 'bottom')">
            <!--
                icon-arrow: 获得一个箭头
                icon-arrow-right: 箭头朝右
                icon-arrow-bottom: 箭头朝下
                icon-arrow-left: 箭头朝左
                icon-arrow-top: 箭头朝上
                配合方法arrowToggle()使用可以切换箭头方向
            -->
            <div class="center icon-arrow icon-arrow-right"></div>
        </div>
        <!--搜索图标-->
        <div class="one-icon-container">
            <div class="center icon-search"></div>
        </div>
        <!--交叉直线图标(加号、乘号)-->
        <div class="one-icon-container">
            <div class="center icon-crossline"></div>
        </div>
    </div>
</body>
</html>